/*
 * @Description: 购票记录首页
 * @Author: shuaishuai.wang
 * @Date: 2019-08-21 09:56:41
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-10-29 21:25:07
 */
<template>
  <div
    class="main fontsize32"
    v-wechat-title="$route.meta.title"
  >
    <!-- <loading
      :state="loadingState"
      :loadingType="loadingType"
    ></loading> -->
    <xb-scroll
      ref="scroll"
      :getListData="getRecordList"
      :up="up"
      :useBody="useBody"
    >
      <div
        class="record_area"
        v-if="!isNoData"
      >
        <record-list
          @closeLoading="closeLoading"
          @loadingFail="loadingFail"
          :recordList="recordList"
        ></record-list>
      </div>

      <!-- 无数据 -->
      <div
        v-else
        class="no_data"
      >
        <div class="icon">
          <img :src="noData">
        </div>
        <p>暂无购票记录</p>
      </div>
    </xb-scroll>
    <foot-bar selectedIndex="2"></foot-bar>
  </div>
</template>

<script>
import { XBScroll } from 'vue-xb-ui-depot'
import { getOrderList } from './../../interface/getInterface'
export default {
  components: {
    'xb-scroll': XBScroll
  },
  data() {
    return {
      noData: require('@wechat/img/no-data.png'), // 无数据时展示的图片
      loadingState: true, // 页面加载状态
      loadingType: 'loading', // 页面加载类型
      recordList: [], // 购票记录数据
      useBody: false,
      up: {
        noMoreSize: 21,
        page: { size: 20 }
      },
      recordData: {},
      isNoData: false
    }
  },
  methods: {
    closeLoading() { // 数据获取成功关闭加载状态
      this.loadingState = false
    },
    loadingFail() { // 数据获取失败显示页面加载失败
      this.loadingType = 'fail'
    },
    getrecordData(recordData) { // 从子组件获取的车票数据
      this.recordData = recordData
      console.log(this.recordData)
    },
    getRecordList(PAGE_INDEX, PAGE_CAPACITY) {
      console.log(PAGE_INDEX, PAGE_CAPACITY, '1111111111')
      return getOrderList({ PAGE_INDEX: PAGE_INDEX, PAGE_CAPACITY: PAGE_CAPACITY }).then(res => {
        console.error(res, PAGE_INDEX)
        if (res.COUNT === 0) {
          this.isNoData = true
          return { length: PAGE_CAPACITY, count: 1 }
        } else {
          this.recordList = PAGE_INDEX === 1 ? res.LIST : this.recordList.concat(res.LIST)
          console.error(this.recordList, '~~~~~~~~~~~~~~~~~~')
          return { length: PAGE_CAPACITY, count: res.COUNT }
        }
      }).catch(err => {
        console.dir(err)
        return { length: PAGE_CAPACITY, count: 1 }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: calc(100%-100px);
  background-color: #f2f5f6;
  margin-bottom: 100px;
  .no_data {
    .icon {
      width: 522px;
      margin: auto;
      padding-top: 64px;
      padding-bottom: 32px;
      img {
        width: 100%;
      }
    }
    p {
      text-align: center;
      color: #9fb0b2;
    }
  }
}
</style>
